<template>
    <div class="mainBox">
        <div class="w100">
            <div class="lineBox">
                <div class="lineTitle">背调流程:</div>
                <div class="lineItemBox">
                    <div v-for="(item, index) in line" :key="index" class="lineItem">
                        <div class="itemLeft" :class="index == line.length - 1 ? 'mr0' : ''">
                            <span class="itemValue1">{{ item.name }}</span>
                            <span class="itemValue2">{{ item.content }}
                                <span v-if="index == line.length - 1" @click="downloadDemo">
                                    背调报告示例
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                </span>
                            </span>
                        </div>
                        <img src="../../assets/image/zxl/jiantou.png" class="itemRight" v-if="index != line.length - 1">
                    </div>
                </div>
                <div class="lineTip">
                    <el-icon :size="16">
                        <WarningFilled />
                    </el-icon>
                    <span>注意：若候选人无法提供学历证明信息，则会进入人工审查阶段，报告出具时间将延迟一个工作日</span>
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <div class="bottomTopBox">
                <el-button class="btnItem2" color="#01509f" @click="openHandle">单人查询</el-button>
                <el-button class="btnItem1" @click="openHandle1">批量查询</el-button>
                <span>您当前套餐剩余背调次数：{{ bt_num }}次</span>
                <div style="flex: 1;display: flex;">
                    <a class="rechargeClass" @click="goRecharge">去充值</a>
                </div>
                <!-- <el-button class="btnItem2" style="width: 74px;" color="#01509f" @click="goRecharge">去充值</el-button> -->
                <el-button class="btnItem1" style="width: 128px;" @click="getLog">充值与使用记录</el-button>
            </div>
            <div class="bottomListBox">
                <el-form ref="queryForm" :inline="true" :model="queryParams">
                    <el-form-item label="员工姓名">
                        <el-input v-model="queryParams.name" placeholder="请输入员工姓名" clearable style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="背调状态">
                        <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 200px;">
                            <el-option v-for="item in statusoptions" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 72px;font-size: 16px;height: 36px;" type="primary" size="mini"
                            color="#01509f" @click="handleQuery">搜索</el-button>
                        <el-button style="width: 72px;font-size: 16px;height: 36px;" @click="reset">重置</el-button>
                        <el-button style="width: 72px;font-size: 16px;height: 36px;" @click="shuax">刷新</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="list" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    element-loading-text="加载中..." header-row-class-name="table-header">
                    <el-table-column label="单号" width="260" align="center" key="order_no" prop="order_no" />
                    <el-table-column label="姓名" align="center" key="name" prop="name" />
                    <el-table-column label="背调状态" align="center" key="status" prop="status">
                        <template #default="scope">
                            <span v-if="scope.row.status == 0">下单失败</span>
                            <span v-if="scope.row.status == 1">待授权</span>
                            <span v-if="scope.row.status == 2">调查中</span>
                            <span v-if="scope.row.status == 3">已完成</span>
                            <span v-if="scope.row.status == 4">已取消</span>
                            <el-tooltip v-if="scope.row.status == 4 && scope.row.remark" :content="scope.row.remark"
                                placement="right">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="风险提示" align="center" key="risk_level" prop="risk_level" width="200">
                        <template #default="scope">
                            <span style="color: #67C23A;" class="flex" v-if="scope.row.risk_level == 0"></span>
                            <span style="color: #67C23A;" class="flex" v-if="scope.row.risk_level == 1"><el-icon>
                                    <CircleCheck />
                                </el-icon><span style="margin-left: 2px;">无风险</span></span>
                            <span @click="showDesc(scope.row.desc)" style="color: #F56C6C;" class="flex"
                                v-if="scope.row.risk_level == 2"><el-icon>
                                    <CircleClose />
                                </el-icon><span style="margin-left: 2px;">高风险</span></span>
                            <span @click="showDesc(scope.row.desc)" style="color: #E6A23C;" class="flex"
                                v-if="scope.row.risk_level == 3"><el-icon>
                                    <Warning />
                                </el-icon><span style="margin-left: 2px;">中风险</span></span>
                            <span @click="showDesc(scope.row.desc)" style="color: #409EFF;" class="flex"
                                v-if="scope.row.risk_level == 10"><el-icon>
                                    <Warning />
                                </el-icon><span style="margin-left: 2px;">低风险</span></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" align="center" key="mobile" prop="mobile" />
                    <el-table-column label="身份证" width="260" align="center" key="id_card" prop="id_card" />
                    <el-table-column label="发起时间" align="center" key="create_time" prop="create_time" />

                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                        width="320">
                        <template #default="scope">
                            <el-button style="font-size: 16px;" v-if="scope.row.status == 3" text icon="View"
                                @click="prePdf(scope.row.name, scope.row.open_report, scope.row.id)">查看</el-button>
                            <span class="downloadBtn" v-if="scope.row.status == 3">
                                <el-button style="font-size: 16px;" text="primary" type="primary" icon="Download"
                                    @click="downloadFile(scope.row.name, scope.row.report, scope.row.id)">下载</el-button>
                            </span>
                            <el-button v-if="scope.row.status == 1" style="font-size: 16px;" text icon="Close"
                                @click="cancelHandle(scope.row)">取消</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit"
                    @pagination-change="handlePaginationChange" />
            </div>
        </div>
        <el-dialog v-model="open2" :close-on-click-modal="true" width="800px" title="充值与使用记录" :z-index="9">
            <el-table ref="multipleTableRef" :data="backLogList" element-loading-background="rgba(0, 0, 0, 0.5)"
                element-loading-text="加载中..." header-row-class-name="table-header">
                <el-table-column label="类型" align="center" key="type_name" prop="type_name" />
                <el-table-column label="次数" align="center" key="change_num" prop="change_num">
                    <template #default="scope">
                        <span>{{ scope.row.change_num }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" align="center" key="create_time" prop="create_time" />
                <el-table-column label="备注" align="center" key="remark" prop="remark" />
            </el-table>
            <Pagination :total="total2" :current-page="pageInfo2.page" :page-size="pageInfo2.limit"
                @pagination-change="handlePaginationChange2" />
        </el-dialog>
        <el-dialog v-model="open" :title="title" width="680" :before-close="handleClose" align-center :z-index="9">
            <div class="topTip">
                提示:请提前与候选人沟通背调事项，提交查询后，平台将通过您提供的手机号给候选人发送背调授权短信，授权完成后，平台将实时出具背调报告注意:目前批量查询最多支持10名候选人
            </div>
            <el-form ref="ruleFormRef" label-width="110px" label-position="right" :model="form" :rules="rules"
                class="form-inline">
                <el-form-item label="候选人类型：" prop="user_type" label-width="120px">
                    <el-radio-group v-model="form.user_type">
                        <el-radio :label="1">员工库</el-radio>
                        <el-radio :label="2" v-if="!is_multiple">外部人员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="姓名：" prop="name" v-if="form.user_type == 2">
                    <el-input v-model="form.name" type="text" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="身份证号：" prop="id_card" v-if="form.user_type == 2">
                    <el-input v-model="form.id_card" type="text" placeholder="请输入身份证号" />
                </el-form-item>
                <el-form-item label="手机号：" prop="mobile" v-if="form.user_type == 2">
                    <el-input v-model="form.mobile" type="text" placeholder="请输入手机号" />
                </el-form-item>
            </el-form>
            <el-form ref="queryForm1" :inline="true" :model="queryParams1" v-if="form.user_type == 1">
                <el-form-item label="">
                    <el-select v-model="queryParams1.job_status" placeholder="请选择状态" style="width: 180px;" clearable>
                        <el-option v-for="item in jobstatusoptions" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="queryParams1.keywords" placeholder="输入员工姓名/手机号查询" clearable
                        style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 72px;font-size: 16px;" type="primary" size="mini" color="#01509f"
                        @click="handleQuery1">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="multipleTableRef" :data="userList" @current-change="handleCurrentChange"
                @selection-change="handleSelectionChange" @row-dblclick="rowClick2" highlight-current-row
                v-loading="loading1" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="加载中..."
                header-row-class-name="table-header" v-if="form.user_type == 1">
                <el-table-column type="selection" width="55" v-if="is_multiple"></el-table-column>
                <el-table-column width="55" v-if="!is_multiple">
                    <template #default="scope">
                        <el-radio class="radio" :label="scope.row" v-model="currentRow">{{ "" }}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align="center" key="name" prop="name" />
                <el-table-column label="手机号" align="center" key="mobile" prop="mobile" />
                <el-table-column label="实名状态" align="center" key="is_real" prop="is_real">
                    <template #default="scope">
                        <span>{{ scope.row.is_real === 0 ? "未实名" : "实名" }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" key="job_status" prop="job_status">
                    <template #default="scope">
                        <span v-if="scope.row.job_status == 1">试用</span>
                        <span v-if="scope.row.job_status == 2">正式</span>
                        <span v-if="scope.row.job_status == 3">待离职</span>
                        <span v-if="scope.row.job_status == 4">离职</span>
                    </template>
                </el-table-column>

            </el-table>
            <Pagination v-if="form.user_type == 1" :total="total1" :current-page="pageInfo1.page"
                :page-size="pageInfo1.limit" @pagination-change="handlePaginationChange1" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" color="#01509f" @click="confirmFind" :disabled="btnStatus">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { user_list } from "@/api/cf";
import { addBacktuning, backtuningList, cancelBacktuning, checkStatus, downloadReport, getCompanyInfo, getLogList } from "@/api/xl";
import Pagination from "@/components/Pagination.vue";
import { onMounted, reactive, ref } from '@/TUIKit/adapter-vue';
import { ElMessage, ElMessageBox, FormRules, TableInstance } from "element-plus";
import { useRouter } from "vue-router";
const line = ref([{
    name: '发起背调',
    content: '在线发起背调查询'
}, {
    name: '候选人授权',
    content: '系统自动发送授权信息，候选人自助授权'
}, {
    name: '实时查询',
    content: '实时查询背调项目'
}, {
    name: '秒出报告',
    content: '专业报告查看与下载'
}])
interface RuleForm {
    name: string
    id_card: string
    mobile: string
    user_type: Number
    type: Number
}
const router = useRouter();
const multipleTableRef = ref<TableInstance>()
const queryParams = ref({ name: "", status: '' });
const queryParams1 = ref({ keywords: "", job_status: "" });
const list = ref([]);
const userList = ref([]);
const checklist = ref([]);
const backLogList = ref([]);
const currentRow = ref()
const pageInfo = ref({ page: 1, limit: 10 });
const pageInfo1 = ref({ page: 1, limit: 10 });
const pageInfo2 = ref({ page: 1, limit: 10 });
const form = ref({
    user_type: 1
});
const title = ref('')
const loading = ref(false);
const loading1 = ref(false);
const open = ref(false)
const open2 = ref(false)
const total = ref(0);
const total1 = ref(0);
const total2 = ref(0);
const bt_num = ref(0);
const is_multiple = ref(false);
const btnStatus = ref(false);
const rules = reactive<FormRules<RuleForm>>({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    user_type: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
})
const statusoptions = ref([
    { value: '', name: "全部" },
    { value: '0', name: "下单失败" },
    { value: '1', name: "待授权" },
    { value: '2', name: "调查中" },
    { value: '3', name: "已完成" },
    { value: '4', name: "已取消" }
]);
const jobstatusoptions = ref([
    { value: '1', name: "试用" },
    { value: '2', name: "正式" },
    { value: '3', name: "待离职" },
    { value: '4', name: "离职" },
]);
onMounted(() => {
    getList();
    getCompany();
    getUserList();
});
const handleQuery = () => {
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getList();
};
const handleQuery1 = () => {
    pageInfo1.value.page = 1;
    pageInfo1.value.limit = 10;
    userList.value = [];
    getUserList();
};
const reset = () => {
    queryParams.value.name = "";
    queryParams.value.status = "";
    getList()
};
const shuax = () => {
    checkStatus().then(res => {
        queryParams.value.name = "";
        queryParams.value.status = "";
        pageInfo.value.page = 1;
        pageInfo.value.limit = 10;
        list.value = [];
        getList()
    });
};
const showDesc = (desc) => {
    ElMessageBox.alert(desc, '风险提示', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: '我已知晓'
    })
}
const getLog = () => {
    pageInfo2.value.page = 1;
    pageInfo2.value.limit = 10;
    getLogList({ page: pageInfo2.value.page, limit: pageInfo2.value.limit }).then(res => {
        backLogList.value = res.data.data;
        total2.value = res.data.total;
        open2.value = true;
    });
};
const getLog1 = () => {
    getLogList({ page: pageInfo2.value.page, limit: pageInfo2.value.limit }).then(res => {
        backLogList.value = res.data.data;
        total2.value = res.data.total;
    });
};
const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.value.page = page;
    pageInfo.value.limit = size;
    getList()
};
const handlePaginationChange1 = ({ page, size }: { page: number; size: number }) => {
    pageInfo1.value.page = page;
    pageInfo1.value.limit = size;
    getUserList()
};
const handlePaginationChange2 = ({ page, size }: { page: number; size: number }) => {
    pageInfo2.value.page = page;
    pageInfo2.value.limit = size;
    getLog1()
};
const handleSelectionChange = (val) => {
    checklist.value = val;
    console.log(checklist.value.length)
}
const handleCurrentChange = (val) => {
    currentRow.value = val
}
const getCompany = () => {
    getCompanyInfo().then(res => {
        console.log(res);
        bt_num.value = res.data.bt_num
    });
}
const getList = () => {
    backtuningList({ page: pageInfo.value.page, limit: pageInfo.value.limit, ...queryParams.value }).then(res => {
        console.log(res);
        list.value = res.data;
        total.value = res.count;
    });
}
const getUserList = () => {
    user_list({ page: pageInfo1.value.page, limit: pageInfo1.value.limit, ...queryParams1.value }).then(res => {
        console.log(res);
        userList.value = res.data;
        total1.value = res.count;
    });
}
const handleClose = (done: () => void) => {
    done()
}
const goRecharge = () => {
    router.push({
        path: "/user",
        query: {
            type: 1,
        }
    });
}
const setCurrent = (row) => {
    multipleTableRef.value!.setCurrentRow(row)
}
const rowClick2 = (row, column, event) => {
    if (currentRow.value && row.id == currentRow.value.id) {
        setCurrent();
        currentRow.value = null;
    } else {
        currentRow.value = row;
    }
}
const openHandle = () => {
    title.value = '单人查询'
    open.value = true;
    is_multiple.value = false;
    form.value.user_type = 1
    form.value.id_card = ''
    checklist.value = []
    multipleTableRef.value!.clearSelection()
    multipleTableRef.value!.setCurrentRow('')
    currentRow.value = ''
}
const openHandle1 = () => {
    title.value = '批量查询'
    open.value = true;
    is_multiple.value = true;
    form.value.user_type = 1
    checklist.value = []
    multipleTableRef.value!.clearSelection()
    multipleTableRef.value!.setCurrentRow('')
    currentRow.value = ''
}
const cancel = () => {
    open.value = false;
    getList()
    resetForm()
}
const confirmFind = () => {
    btnStatus.value = true
    if (is_multiple.value) {
        form.value.type = 2
        let group_ids = checklist.value.map(item => item.id);
        console.log(group_ids)
        form.value.user_id = group_ids;
    } else {
        form.value.type = 1
        if (form.value.user_type == 1) {
            if (currentRow.value) {
                form.value.user_id = currentRow.value.id;
            } else {
                ElMessage({
                    message: "请选择要查询的员工",
                    grouping: true,
                    type: "error",
                });
                btnStatus.value = false
                return false
            }
        }
    }
    if (form.value.user_type == 1) {
        if (form.value.user_id) {
            addBacktuning(form.value).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                open.value = false;
                btnStatus.value = false
                getList()
                resetForm()
                getCompany()
            }).catch(err => {
                btnStatus.value = false
            });
        } else {
            ElMessage({
                message: "请选择要查询的员工",
                grouping: true,
                type: "error",
            });
            btnStatus.value = false
            return false
        }
    } else {
        if (form.value.name && form.value.mobile) {
            addBacktuning(form.value).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                open.value = false;
                btnStatus.value = false
                getList()
                resetForm()
                getCompany()
            }).catch(err => {
                btnStatus.value = false
            });
        } else {
            if (!form.value.name) {
                ElMessage({
                    message: '请输入姓名',
                    grouping: true,
                    type: "error",
                });
                btnStatus.value = false
                return false
            }
            if (!form.value.mobile) {
                ElMessage({
                    message: '请输入手机号',
                    grouping: true,
                    type: "error",
                });
                btnStatus.value = false
                return false
            }
        }
    }
}
const resetForm = () => {
    form.value.name = "";
    form.value.id_card = "";
    form.value.user_type = 1;
    form.value.mobile = '';
}
const prePdf = async (name, url, id) => {
    let urls = ''
    if (url) {
        urls = url
    } else {
        await downloadReport({
            id: id
        }).then(res => {
            console.log(res)
            urls = res.data.open_url;
        });
    }

    // 在新窗口打开PDF
    const newWindow = window.open(urls, '_blank');

    // 检查是否成功打开新窗口（可能被浏览器弹窗阻止）
    if (!newWindow) {
        alert('浏览器阻止了弹出窗口，请允许弹出窗口后重试');
    }
}
const downloadFile = async (name, url, id) => {
    let urls = ''
    if (url) {
        urls = url
    } else {
        await downloadReport({
            id: id
        }).then(res => {
            console.log(res)
            urls = res.data.download_url;
        });
    }
    const a = document.createElement('a');
    a.href = urls;
    a.target = '_blank';
    a.download = name + '背调报告.pdf'; // 自定义下载文件名
    a.rel = 'noopener noreferrer';
    a.setAttribute('crossorigin', 'anonymous')
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const downloadDemo = () => {
    const urls = 'https://demo-user.niuyuwang.com/static/demo.pdf' // 替换为实际文件 URL
    const newWindow = window.open(urls, '_blank');

    // 检查是否成功打开新窗口（可能被浏览器弹窗阻止）
    if (!newWindow) {
        alert('浏览器阻止了弹出窗口，请允许弹出窗口后重试');
    }
    // const a = document.createElement('a');
    // a.href = urls;
    // a.target = '_blank';
    // a.download = '背调报告示例.pdf'; // 自定义下载文件名
    // a.rel = 'noopener noreferrer';
    // a.setAttribute('crossorigin', 'anonymous')
    // // a.setAttribute('Content-Disposition', 'attachment; filename="filename.pdf"')
    // document.body.appendChild(a);
    // a.click();
    // document.body.removeChild(a);
}
const cancelHandle = (row) => {
    ElMessageBox.confirm("是否确定取消?", "操作提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
        if (action === "confirm") {
            cancelBacktuning(row.id).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                getList()
                getCompany()
            });
        }
    });
}
</script>

<style lang="scss" scoped>
:deep(.el-table__header) {
    .table-header {
        th {
            font-size: 16px;
            background: #f3f8fb;
            height: 53px;
            color: #6f7070;
            font-weight: normal;
        }
    }
}

.descClass {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.downloadBtn {
    .el-button.is-text:not(.is-disabled):hover {
        color: #fff;
    }
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.topTip {
    background-color: #f3f8fb;
    border-radius: 8px;
    font-size: 16px;
    color: #999;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 19px;
}

.bottomBox {
    padding: 0px 19px 19px 19px;
    box-sizing: border-box;

    .bottomTopBox {
        margin-bottom: 18px;
        display: flex;
        align-items: center;

        .btnItem1 {
            border-radius: 6px;
            width: 108px;
            height: 36px;
            text-align: center;
            line-height: 32px;
            box-sizing: border-box;
            font-size: 16px;
            margin-right: 14px;
        }

        .btnItem2 {
            border: none;
            border-radius: 6px;
            width: 108px;
            height: 36px;
            text-align: center;
            line-height: 32px;
            box-sizing: border-box;
            font-size: 16px;
        }

        span {
            font-size: 16px;
            color: #333;
        }

        .rechargeClass {
            font-size: 16px;
            color: #01509f;
            //flex: 1;
            margin-left: 14px;
        }
    }
}

.mainBox {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;

    .w100 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lineBox {
        box-sizing: border-box;
        background-color: #f3f8fb;
        border-radius: 12px;
        margin: 26px 19px;
        padding: 39px 42px 27px 42px;

        .lineTitle {
            font-size: 18px;
            font-weight: bolder;
            color: #333333;
            margin-bottom: 32px;
        }

        .lineTip {
            color: #E6A23C;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 12px;
            width: 100%;
            text-align: center;

            span {
                margin-left: 6px;
            }
        }

        .lineItemBox {
            // width: 100%;
            display: flex;
            align-items: center;
            margin-left: 54px;
            // justify-content: space-evenly;

            .lineItem {
                display: flex;
                align-items: center;

                .mr0 {
                    margin-right: 0;
                }

                .itemLeft {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    // flex: 1;
                    margin-right: 50px;

                    .itemValue1 {
                        font-size: 16px;
                        font-weight: bolder;
                        color: #333333;
                        margin-bottom: 7px;
                    }

                    .itemValue2 {
                        font-size: 16px;
                        color: #666666;
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        span {
                            display: flex;
                            align-items: center;
                            color: #01509f;
                            margin-left: 9px;
                        }
                    }
                }

                .itemRight {
                    width: 12px;
                    height: 6px;
                    margin-right: 50px;
                }
            }
        }
    }
}
</style>
